@include('backstage/public/_header')
    <style>
        .add_tab td span #thume {line-height: 100px;color: #d94040;font-size: 14px;text-align: center;}
        .tips{ border-top: none; }
    </style>
    <div class="result_wrap">
        <form id="form_data">
            <table class="add_tab">
                <tbody>
                    <tr>
                        <th><i class="require">*</i>圖片名稱：</th>
                        <td>
                            <input type="text" name="name" value="{!! $data->name !!}">
                            <span><i class="fa fa-exclamation-circle yellow"></i>圖片名稱不能爲空</span>
                        </td>
                    </tr>
                    <tr>
                        <th><i class="require">*</i>圖片描述：</th>
                        <td>
                            <textarea name="desc">{!! $data->desc !!}</textarea>
                        </td>
                    </tr>
                    <tr>
                        <th><i class="require">*</i>縮略圖：</th>
                        <td>
                            <input type="file" name="img_url" id="img_url" style="float: left;margin-top: 40px;">
                            <span style="float:left">
                                <div style="text-align:center; clear:both; overflow:hidden; width:290px; height:100px">
                                @if( file_exists( public_path().$data->img_url ) )
                                    <a id="hrefimg"  target="_blank"  href="{!! url($data->img_url) !!}">
                                        <img id="srcimg" src="{!! url($data->img_url) !!}" height="100" alt="圖片預覽" />
                                    </a>
                                @else
                                    <span id="thume">無縮略圖</span>
                                    <a id="hrefimg"  target="_blank" style="display:none;" href="">
                                        <img id="srcimg" src="" height="100" alt="圖片預覽" />
                                    </a>
                                @endif
                                </div>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <th>是否顯示：</th>
                        <td>
                            <label><input type="radio" name="is_show" {!! $data->is_show == 1 ? 'checked' : '' !!} value="1" >顯示</label>
                            <label><input type="radio" name="is_show" {!! $data->is_show == 0 ? 'checked' : '' !!} value="0">不顯示</label>
                        </td>
                    </tr>
                    <tr>
                        <th></th>
                        <td>
                            <input type="button" value="提交" id="btnSub" onclick="onSubmit();">
                            <input type="button" class="back" onclick="history.go(-1)" value="返回">
                        </td>
                    </tr>
                </tbody>
            </table>
            {{ csrf_field() }}
        </form>
        <div class="tips">
            <h3>圖片規格添加問題</h3> 
            <p>1、帶*為必填項，不允許為空</p>
            <p>2、圖片上傳只允許".png", ".jpg", ".jpeg", ".gif", ".bmp"，文件大小不超過2M</p>
        </div>
    </div>

    <script type="text/javascript">
    $('#img_url').click(function(){
        document.getElementById('srcimg').src = '';
        document.getElementById('hrefimg').href= '';
        document.getElementById('img_url').value= '';
        $("#hrefimg").hide();
        $("#thume").show();
    });
    $('#img_url').change(function(){
        var f = document.getElementById('img_url').files[0];
        var url = window.URL.createObjectURL(f);
        document.getElementById('srcimg').src = url;
        document.getElementById('hrefimg').href = url;
        if($('#imgfile').val()==""){
            $("#hrefimg").hide();
            $("#thume").show();
        }else{
            $("#hrefimg").show();
            $("#thume").hide();
        }
    });
    var vfTime = 2;
    var timer=null;
    function setTime(){
        vfTime --;
        if(vfTime<=0){
            vfTime = 0;
            clearInterval(timer);
        }
    }

    function onSubmit(){
        var name=$(":input[name='name']").val();
        var img_url=$(":input[name='img_url']").val();
        if (vfTime!=0 && timer!=null){
            layer.msg('操作過於頻繁', {icon: 7,anim: 6});
            // setTimeout(function(){$("#chiContent").focus();}, 1500);
            return false;
        }
        if (name==''){
            layer.msg('圖片名稱不能為空', {icon: 5,anim: 6});
            setTimeout(function(){$(":input[name='name']").focus();},0);
            return false;
        }
        if (img_url=='') {
            layer.msg('請選擇圖片', {icon: 5,anim: 6});
            // setTimeout(function(){$(":input[name='img_url']").focus();},0);
            return false;
        }
        var form = new FormData(document.getElementById("form_data"));
        $.ajax({
            url:"{{$doedit}}",
            type:"post",
            data:form,
            processData:false,
            contentType:false,
            dataType : "json",
            success:function(data){
                if(data.status==1){
                    layer.msg(data.message, {icon: 6});
                    setTimeout(function(){
                        window.location.href=data.jumpUrl;
                    },2000);
                }else if(data.status==-1){
                    layer.alert(data.message, {icon: 2,anim:6});
                }else{
                    layer.msg(data.message, {icon: 5});
                }
                clearInterval(timer);
                timer = setInterval(setTime, 1000, "1");
            }
        });
    }
    </script> 
@include('backstage/public/_footer')